/**
 * 搜索
 */
 import React, { useState,useEffect,useMemo } from 'react';
import getCinemaListAction from '../redux/ActionCreator/getCinemaListAction';
 import {store} from '../redux/store';
 function Search(){
    const [cinemaList,setCinemaList] =useState(store.getState().CinemaListReducer.list)
    const [mytext,setmytext] =useState("")
    useEffect(()=>{
        if(store.getState().CinemaListReducer.list.length==0){
            //说明数据为空,就请求后台数据
            // actionCreator里写异步
            store.dispatch(getCinemaListAction())
        }else{
            //拿缓存的数据
            console.log("拿数据")
        }
        //订阅
        let fh=store.subscribe(()=>{
            console.log("cinemas订阅拿到的数据:",store.getState().CinemaListReducer.list)
            setCinemaList(store.getState().CinemaListReducer.list)
        })
        return ()=>{
            //取消订阅
            fh();
        }
    },[]) 
    const getCinemaList=useMemo(()=>cinemaList.filter(item=>{
        //统一转大写
        return item.name.toUpperCase().includes(mytext.toUpperCase())||item.address.toUpperCase().includes(mytext.toUpperCase())
    }),[cinemaList,mytext])
    return (
         <div>
            <input value={mytext} onChange={(e)=>{
               setmytext(e.target.value)
            }}></input>
             搜索
             <ol>
                {
                    getCinemaList.map(item=>{
                      return <li key={item.cinemaId}>{item.cinemaId}----{item.name}</li>
                    })
                }
            </ol>
         </div>
     );
 }
 
 export default Search